<template>
  <div id="studentCourse">
    <div class="title">
      <a :href="imgHref"><img id="schoolImg" :src="imgSchool" :alt="imgAlt" ></a>
      <a :href="nameHref"><span id="schoolName">{{ schoolName }}</span></a>
      <div id="userExitDiv">
        <a id="user" :href="userHref">{{ userName }}</a>
        <a :href="exitHref"><img id="exitImg" :src="imgExit" alt="exitAlt" @click="exitAlert"></a>
      </div>
     </div>
     <div>

     <div class="teac-main">
         <ul class="teac-mainnav clear">
             <li class="current"><a href="javascript:void(0);">{{mainnavName}}</a></li>
         </ul>
     </div>

     <div class="csnav clear">
         <a href="" class="nav-a">
                 <span>{{selectTerm}}</span>
                 <img :src="selectImg" alt="">

         </a>

         <a href="" class="nav-a">
                 <span>{{selectWeeks}}</span>
                 <img :src="selectImg" alt="">
         </a>

         <button class="nav-b">
             {{buttonName}}
         </button>
     </div>
<div class="content">
    <div class="contab">
    <table>
        <thead>
        <tr>
            <td>{{timetable.timesPerweek}}</td>
            <td>{{timetable.monday}}</td>
            <td>{{timetable.tuesday}}</td>
            <td>{{timetable.wednesday}}</td>
            <td>{{timetable.thursday}}</td>
            <td>{{timetable.friday}}</td>
            <td>{{timetable.saturday}}</td>
            <td>{{timetable.sunday}}</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="timetable in timetables">
            <td>{{timetable.timesPerweek}}<br />{{timetable.times}}</td>
            <td>{{timetable.monday}}</td>
            <td>{{timetable.tuesday}}</td>
            <td>{{timetable.wednesday}}</td>
            <td>{{timetable.thursday}}</td>
            <td>{{timetable.friday}}</td>
            <td>{{timetable.saturday}}</td>
            <td>{{timetable.sunday}}</td>
        </tr>
        </tbody>
    </table>
</div>
</div>

  </div>
</template>

<script>
  export default {
    name: 'studentCourse',
    data () {
      return {
        imgHref: 'http://www.samsph.com/',//医院官网
        nameHref: 'http://www.samsph.com/hsxx/1092/1/',//学校官网
        userHref: '',//预想跳转到个人信息相关界面
        exitHref: '',//预留备用
        schoolName: '护士学校',
        userName: '您好,李华!',
        imgSchool:require('../assets/Top.png'),
        imgExit:require('../assets/Exit.png'),
        imgAlt: '四川省医科科学院·四川省人民医院',
        exitAlt: '退出图标',
        mainnavName:'查看我的课表',
        selectTerm:'选择学期',
        selectWeeks:'选择周数',
        selectImg:require('../assets/xiala.png'),
        buttonName:'提交时间设置',
        recordNumber:'2',
        recordPage:'1',
        currentPage:'一',
        timetable: {
                      timesPerweek: '节次／周次',
                      times:'',
                      monday: '星期一',
                      tuesday: '星期二',
                      wednesday:'星期三',
                      thursday:'星期四',
                      friday:'星期五',
                      saturday:'星期六',
                      sunday:'星期日'
                  },
                  timetables: [{
                      timesPerweek: '第一节',
                      times:'8:30-9:15',
                      monday: '',
                      tuesday: '',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                  }, {
                      timesPerweek: '第二节',
                      times:'9:20-10:05',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                  },{
                      timesPerweek: '第三节',
                      times:'10:20-11:05',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                  },{
                      timesPerweek: '第四节',
                      times:'11:10-11:55',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                  },{
                      timesPerweek: '第五节',
                      times:'14:30-15:15',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                  },{
                      timesPerweek: '第六节',
                      times:'8:30-9:15',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                  },{
                      timesPerweek: '第七节',
                      times:'16:20-17:05',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                  },{
                      timesPerweek: '第八节',
                      times:'17:10-17:55',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                   },{
                     timesPerweek: '第九节',
                      times:'19:30-20:15',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                  },{
                      timesPerweek:'第十节',
                      times:'20:20-21:05',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                  },{
                      timesPerweek: '第十一节',
                      times:'21:20-21:55',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                  },{
                      timesPerweek: '第十二节',
                      times:'22:00-22:45',
                      monday: '',
                      tuesday:'',
                      wednesday:'',
                      thursday:'',
                      friday:'',
                      saturday:'',
                      sunday:''
                   }
           ]
      }
    },
    methods: {
      exitAlert: function () {
        //仅供测试，预想是注销并返回登录页面
        if(confirm("您确定要退出并关闭页面吗？")){
          window.close();
        }
      }
    }
  }
</script>

<style scoped>

  .clear {
      display: block;
  }
  .clear:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
  }
  a{
    text-decoration: none;
  }
  #studentCourse{
    text-align: left;
    background-color: white;
  }
  .title{
     width: 90%;
     margin: 0 auto;
  }
  #schoolImg{
    width: 35%;
    height: 4rem;
    border-right: 0.1rem solid whitesmoke;
    padding: 0.5rem;
  }
  #schoolName{
    color: grey;
    font-size: 1.2rem;
    font-weight: bold;
    position: relative;
    bottom: 2rem;
  }
  #userExitDiv{
    float: right;
    display: flex;
    align-items: flex-end;
    position: relative;
    top: 1rem;
  }
  #user{
    color: black;
    text-decoration: none;
    font-size: 1rem;
  }
  #exitImg{
    position: relative;
    top: 0.75rem;
    width: 2rem;
    height: 2rem;
  }
  .teac-main{
      background-color: #1d7f65;
      width: 100%;
  }
  .teac-mainnav{
      margin-left: 3.5rem;
      width: 100%;
      padding-left: 0;
  }
  .teac-mainnav > li {
      float: left;
      width: 17%;
      text-align: center;
      list-style: none;
      background: #1d7f65;
  }
  .teac-mainnav > li > a {
      color: #fff;
      display: block;
      font-size: 1.2rem;
      padding: 1.5rem 1rem;
      text-decoration: none;
  }
  .teac-mainnav > li.current{
      background: #17a43f;
  }

  .csnav{
      width: 100%;
      height: 5rem;
      background: #ffffff;
  }
  .nav-a{
      line-height: 2rem;
      float: left;
      overflow: hidden;
      height: 2rem;
      width: 12rem;
      padding-left: 1rem;
      margin:1rem -2rem 0 4rem;
      border: 1px solid #c2c2c2;
      border-radius: 1rem;
      color: #000;
      font-size: 1rem;
  }
  .nav-a img{
      width: 2rem;
      height: 2rem;
      padding-top: 0.2rem;
      float: right;
  }
  .nav-a span{
      float: left;
  }

  .nav-b{
      width: 10rem;
      height: 3rem;
      border: none;
      border-radius: 0.5rem;
      background-color: #23995f;
      cursor: pointer;
      margin: 0 auto;
      font-size: 1.2rem;
      float: right;
      color: #fff;
      margin: 0.5rem 8rem 0 0;
  }
  .nav-b:hover{
      background-color: #41b37b;
  }


  .content{
      width: 100%;
      background: #f0f3f8;
      text-align: center;

  }
  .contab{
      width: 95%;
      height: 100%;
      padding:3rem;
  }
  table{
      border-collapse:collapse;
      margin: 0 auto;
      width: 90%;
  }

  td {
      border: 1px solid #e3e3e3;
      width: 10%;
      height: 3rem;
      background: #fff;

  }

  @media screen and (max-width:1023px){
    html{
      font-size: 56%;
    }
  }
</style>
